<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb class="el-bd"
                   separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容的卡片 -->
    <el-card class="box-card">

      <el-form :inline="true"
               :model="userVO"
               class="demo-form-inline form-widht">
        <el-row>
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select v-model="userVO.departmentId"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in departmentList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptCount }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="userVO.username"
                        placeholder="请输入用户名"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱">
              <el-input v-model="userVO.email"
                        placeholder="请输入邮箱"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-radio-group v-model="userVO.sex">
              <el-radio :label="0">帅哥</el-radio>
              <el-radio :label="1">美女</el-radio>
              <el-radio :label="null">全部</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row class="row_tow">
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="userVO.nickname"
                        placeholder="昵称"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button icon="el-icon-refresh"
                         @click="reset">重置</el-button>
              <el-button type="primary"
                         icon="el-icon-search"
                         @click="toSearch">查询</el-button>
              <el-button type="info"
                         icon="el-icon-plus"
                         @click="addUser">添加</el-button>
              <el-button type="warning"
                         icon="el-icon-download"
                         @click="exportUser">导出</el-button>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="userList"
                border
                style="width: 100%"
                class="el-tb"
                max-height="379">
        <el-table-column prop="id"
                         label="#"
                         width="50">
        </el-table-column>
        <el-table-column prop="username"
                         label="姓名"
                         width="120">
        </el-table-column>
        <el-table-column prop="sex"
                         label="性别"
                         width="50">
          <!-- 获取循环的对象 插槽  -->
          <template slot-scope="scope">
            <!-- 双重三元表达式 -->
            {{scope.row.sex==0?'男':scope.row.sex==1?'女':'保密'}}
          </template>
        </el-table-column>
        <el-table-column prop="departName"
                         label="所属部门"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="birth"
                         label="生日"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="email"
                         label="邮箱"
                         width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber"
                         label="电话"
                         width="150">
        </el-table-column>
        <el-table-column prop="status"
                         label="是否禁用"
                         width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       active-color="#ff4949"
                       inactive-color="#cccccc">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary"
                     size="mini"
                     icon="el-icon-edit"></el-button>
          <el-button type="danger"
                     size="mini"
                     icon="el-icon-delete"></el-button>
          <el-button type="warning"
                     size="mini"
                     icon="el-icon-s-tools"></el-button>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="current"
                     :page-sizes="[5, 7, 9, 11]"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
      <!-- 添加的弹出框 -->
      <!-- 父传子 -->
      <UserAdd :departmentList="departmentList"
               :addOrUpdateVisible="addOrUpdateVisible"
               @changeShow="showAddOrUpdate"
               ref="addOrUpdateRef"></UserAdd>
    </el-card>
  </div>
</template>

<script>
import { findAll } from '../../api/department'
import { findUserList, exportUserInfo } from '../../api/user'
import UserAdd from './UserAdd.vue'

export default {
  components: {
    UserAdd,
  },

  data () {
    return {
      userVO: {
        username: '',
        nickname: '',
        email: '',
        sex: null,
        departmentId: ''
      },
      departmentList: [],
      value: '',
      radio: 3,
      userList: [],
      current: 1,
      size: 7,
      total: null,
      // 控制添加框显示与隐藏
      addOrUpdateVisible: false,
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!');
    }
    ,
    handleSizeChange (val) {
      this.size = val;
      this.search();
    },
    handleCurrentChange (val) {
      this.current = val;
      this.search();
    },
    // 获取所有部门信息
    async getDeptMents () {
      let result = await findAll();
      console.log(result);
      this.departmentList = result.deptAndCount;
    },
    // 根据条件查询用户的信息
    async search () {
      let result = await findUserList(this.current, this.size, this.userVO);
      this.userList = result.userPage.records;
      this.total = result.userPage.total;
      this.current = result.userPage.current;
      this.size = result.userPage.size;
      console.log(result);
    },
    // 条件查询
    toSearch () {
      this.current = 1;
      this.search();
    },
    // 添加用户信息
    addUser () { this.addOrUpdateVisible = true; },
    // 导出用户信息
    async exportUser () {
      exportUserInfo(this.userVO).then(res => {
        //这里没有返回数据,但是要在响应头中进行下载操作
        // 将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res]));
        //创建了一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls";
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(err => {

      })
    },
    // 重置
    reset () {
      this.userVO = {
        username: '',
        nickname: '',
        email: '',
        sex: null,
        departmentId: ''
      }
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    }
  },
  created () {
    this.getDeptMents();
    this.search();
  }

}
</script>

<style lang="less" scoped>
.el-bd {
  margin-bottom: 10px;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-pagination {
  margin-top: 4px;
}
.row_tow {
  margin-top: -20px;
}
.el-tb {
  position: relative;
  top: -8px;
}
</style>